import React, { useMemo } from 'react';
import { Tag } from 'antd';

import { CheckTaskStatus } from '@/services/consts';

export type StatusTagProps = {
  status: number | undefined;
};

export const StatusTag: React.FC<StatusTagProps> = (props) => {
  const { status } = props;

  let color = '';
  let text = '';

  switch(status){
    case CheckTaskStatus.Unpublish.value:
      color = '#f50';
      text = CheckTaskStatus.Unpublish.label;
      break;
    case CheckTaskStatus.Wait.value:
      color = '#108ee9';
      text = CheckTaskStatus.Wait.label;
      break;
    case CheckTaskStatus.Run.value:
      color = '#108ee9';
      text = CheckTaskStatus.Run.label;
      break;
    case CheckTaskStatus.Completed.value:
      color = '#87d068';
      text = CheckTaskStatus.Completed.label;
      break;
    case CheckTaskStatus.Cancel.value:
      color = 'grey';
      text = CheckTaskStatus.Cancel.label;
      break;
    case CheckTaskStatus.Timeout.value:
      color = 'black';
      text = CheckTaskStatus.Timeout.label;
      break;   
  }

  const renderTag = useMemo(() => {
      return (<Tag color={color}><b>{text}</b></Tag>);
  }, [status]);

  return <>{renderTag}</>;
};


export default StatusTag;
